<template>
  <div>
    <div class="chat_box no-select">
      <div class="message_list">
        <div class="logo_box">
          <div class="logo">
            <img src="../assets/logo.png" alt="">
          </div>
          <div class="name">{{ language.logoname }}</div>
        </div>
        <div class="hardware_box">
          <template v-for="(item, index) in 28">
            <div class="hardware_list" @click="setHardware(index)">
              <div class="icon iconfont icon-kakaotalk" :class="selectHardware == index ? 'hardwarecolor01' : ''"></div>
              <div class="name" :class="selectHardware == index ? 'hardwarecolor01' : ''">Kakaotalk</div>
              <div class="round" :class="selectHardware == index ? 'hardwarecolor02' : ''">13</div>
            </div>
          </template>
        </div>
        <div class="roll_box iconfont icon-gunlungundong"></div>
        <div class="my_user">
          <div class="avatar">
            <img src="../assets/images/avatar01.jpg" alt="">
          </div>
          <div class="text_box">
            <div class="name">Jordan</div>
            <div class="text">ID:hhhd646</div>
          </div>
          <div class="abort" @click="outAbort">
            <img src="../assets/images/abort.png" alt="">
          </div>
        </div>
      </div>


      <div class="chat_list" v-resizable>
        <div class="chat_input">
          <input type="text" placeholder="Please enter">
          <div class="icon iconfont icon-sousuo"></div>
        </div>
        <div class="list_titile">
          <div class="icon iconfont icon-xiaoxi"></div>
          <div class="title">Messages</div>
          <div class="mode iconfont icon-zhongtumoshi" v-if="listMode" @click="setListMode"></div>
          <div class="mode iconfont icon-liebiaomoshi1" v-if="!listMode" @click="setListMode"></div>
        </div>
        <div class="list_box" v-if="listMode">
          <template v-for="(item, index) in 20">
            <div class="list" :class="selectUser == index ? 'listbg' : ''" @click="openUserValue(index)">
              <div class="avatar">
                <div class="round">
                  <div class="color" :class="index == 0 ? 'roundcolor' : ''"></div>
                </div>
                <img src="../assets/images/avatar01.jpg" alt="" :class="index != 0 ? 'gray' : ''">
              </div>
              <div class="list_text">
                <div class="name">monika</div>
                <div class="text">thanks for the quickthanks for the quickthanks for the quick</div>
              </div>
              <div class="state_box">
                <div class="time">09:41</div>
                <div class="state">2</div>
              </div>
            </div>
          </template>
        </div>
        <div class="list_box list_box_mode" v-if="!listMode">
          <template v-for="(item, index) in 70">
            <div class="list list_mode" :class="selectUser == index ? 'listbg' : ''" @click="openUserValue(index)">
              <div class="avatar" :class="index != 0 ? 'gray' : ''">
                <div class="unread">
                  <div class="color">2</div>
                </div>
                <img src="../assets/images/avatar01.jpg" alt="" :class="index == 0 ? 'modeImgcolor' : ''">
              </div>
            </div>
          </template>
        </div>
        <div class="roll_box iconfont icon-gunlungundong"></div>
      </div>

      <div class="chat_content" @dragover.prevent @dragenter.prevent @drop.prevent="handleDrop">
        <div class="chat_hearder">
          <div class="bg"></div>
          <div class="hearder">
            <div class="name_box">
              <div class="icon iconfont icon-renyuan"></div>
              <div class="name">monika</div>
              <div class="tag_box">
                <div class="i iconfont icon-24gf-tags3"></div>
                <div class="t">供货量需求大</div>
              </div>
            </div>
            <!-- <div class="button" @click="renderAutoSwitch">
              <div class="icon iconfont icon-fanyi"></div>
              <button v-if="renderAuto == true">关闭翻译</button>
              <button v-else>打开翻译</button>
            </div> -->
            <div class="button" @click="langSelct">
              <div class="icon iconfont icon-yuyanqiehuan"></div>
              <button>CN</button>
              <transition name="animethree">
                <div class="drawers_box" v-if="langshow">
                  <div class="triangle"></div>
                  <div class="drawers">
                    <div class="text">CN</div>
                  </div>
                  <div class="drawers">
                    <div class="text">EN</div>
                  </div>
                </div>
              </transition>
            </div>
            <div class="button" @click="goUnreadable">
              <div class="icon iconfont icon-duwu"></div>
              <button>已读不回</button>
            </div>

          </div>
        </div>


        <div class="content_list" @click="closeDrawers">
          <div class="clear_top"></div>
          <template v-for="(item, index) in valueList" :key="item.id">
            <div class="go_list" :id="item.id" ref="itemRefs">
              <div class="my_list" v-if="item.type == 0">
                <div class="avatar" @click="openProfile">
                  <img src="../assets/images/avatar01.jpg" alt="">
                </div>
                <div class="chat_text">
                  <div class="name">{{ item.name }}</div>
                  <div class="text_box">
                    <div class="text_content">
                      <template v-if="renderAuto == true">
                        <div class="render_box" v-if="item.msg">
                          <div class="triangle"></div>
                          <div class="render_value">
                            <div class="icon iconfont icon-yi"></div>
                            <div class="render_text">
                              这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文这里是中文
                            </div>
                          </div>
                        </div>
                      </template>
                      <div class="text" v-if="!item.img & !item.file & !item.phonetic">{{ item.msg }}</div>
                      <div class="img" v-if="item.img">
                        <img src="../assets/images/post01.jpg" alt="">
                      </div>
                      <div class="file" v-if="item.file">
                        <div class="down iconfont icon-xiazai"></div>
                        <div class="file_name">
                          <div class="n">文件名</div>
                          <div class="size">12MB</div>
                        </div>
                        <img src="../assets/images/type01.png" :alt="item.file">
                      </div>
                      <div class="phonetic" v-if="item.phonetic">
                        <!-- <button @click="playAudio">播放</button> -->
                        <div class="voice-message" :class="direction">
                          <!-- 播放按钮 -->
                          <div class="play-button" @click="togglePlay">
                            <div v-if="!isPlaying" class="play iconfont icon-bofang1"></div>
                            <div v-if="isPlaying" class="playing-animation">
                              <div class="wave-bar"></div>
                              <div class="wave-bar"></div>
                              <div class="wave-bar"></div>
                            </div>
                          </div>
                          <!-- 时间 -->
                          <span class="duration">{{ duration }}"</span>
                        </div>
                      </div>
                      <div class="time"><span class="iconfont icon-shijian"></span> {{ item.time }}
                      </div>
                    </div>
                    <div class="more iconfont icon-gengduo" @click.stop="openList(index)">
                      <transition name="animetwo">
                        <div class="drawers_box" v-if="item.open">
                          <!-- <div class="drawers">
                            <div class="text">翻译</div>
                            <div class="icon iconfont icon-EA"></div>
                          </div> -->
                          <div class="drawers">
                            <div class="text">复制</div>
                            <div class="icon iconfont icon-fuzhi"></div>
                          </div>
                          <div class="drawers">
                            <div class="text">删除</div>
                            <div class="icon iconfont icon-shanchu"></div>
                          </div>
                        </div>
                      </transition>
                    </div>
                  </div>
                </div>
              </div>
              <div class="his_list" v-if="item.type == 1">
                <div class="chat_text">
                  <div class="name">customer</div>
                  <div class="text_box">
                    <div class="more iconfont icon-gengduo" @click.stop="openList(index)">
                      <transition name="animetwo">
                        <div class="drawers_box" v-if="item.open">
                          <!-- <div class="drawers">
                            <div class="text">翻译</div>
                            <div class="icon iconfont icon-EA"></div>
                          </div> -->
                          <div class="drawers">
                            <div class="text">复制</div>
                            <div class="icon iconfont icon-fuzhi"></div>
                          </div>
                          <div class="drawers">
                            <div class="text">删除</div>
                            <div class="icon iconfont icon-shanchu"></div>
                          </div>
                        </div>
                      </transition>
                    </div>
                    <div class="text_content">
                      <template v-if="renderAuto == true">
                        <div class="render_box" v-if="item.msg">
                          <div class="render_value">
                            <div class="render_text">{{ item.msg }}</div>
                            <div class="icon iconfont icon-yi"></div>
                          </div>
                          <div class="triangle"></div>
                        </div>
                      </template>
                      <div class="text" v-if="!item.img & !item.file & !item.phonetic">{{ item.msg }}</div>
                      <div class="img" v-if="item.img">
                        <img src="../assets/images/post01.jpg" alt="">
                      </div>
                      <div class="file" v-if="item.file">
                        <img src="../assets/images/type01.png" :alt="item.file">
                        <div class="file_name">
                          <div class="n">文件名</div>
                          <div class="size">12MB</div>
                        </div>
                        <div class="down iconfont icon-xiazai"></div>
                      </div>
                      <div class="phonetic" v-if="item.phonetic">
                        <!-- <button @click="playAudio">播放</button> -->
                        <div class="voice-message" :class="direction">
                          <!-- 时间 -->
                          <span class="duration">{{ duration }}"</span>
                          <!-- 播放按钮 -->
                          <div class="play-button" @click="togglePlay">
                            <div v-if="!isPlaying" class="play iconfont icon-bofang1"></div>
                            <div v-if="isPlaying" class="playing-animation">
                              <div class="wave-bar"></div>
                              <div class="wave-bar"></div>
                              <div class="wave-bar"></div>
                            </div>
                          </div>

                        </div>
                      </div>
                      <div class="time"><span class="iconfont icon-shijian"></span> {{ item.time }}
                      </div>
                    </div>
                  </div>

                </div>
                <div class="avatar">
                  <img src="../assets/images/avatar02.png" alt="">
                </div>
              </div>
            </div>


          </template>
          <!-- <div class="clear_go" ref="bottom"></div> -->
        </div>

        <div class="chat_footer">
          <!-- 输入框文本翻译 -->
          <transition name="animefive">
          <template v-if="!quickerType">
            <template v-if="sendSwitch">
              <div class="quick_box quick_box02" v-if="sendType && sendValue && !sendValue.startsWith('/')">
                <div class="quick_render_content">
                  <div class="render_box">
                    <div class="render_icon iconfont icon-yi"></div>
                    <textarea
                      class="render_text">Here is the translation Here is the translationHere is the translationHereHere is the translation Here is the translationHere is the translationHere</textarea>
                    <div class="menu">发送</div>
                    <div class="probe_box">
                      <div class="trle"></div>
                      <div class="probe_text">
                        <div class="probe_icon iconfont icon-jiance-1"></div>
                        <div class="probe_value">这里是中文</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="triangle02"></div>
              </div>
            </template>
          </template>
        </transition>
          <div class="footer">
            <div class="icon iconno iconfont icon-yuyin" @click="soundRecording"></div>
            <div class="input">
              <textarea class="inputTextarea" ref="footerInput" name="" id="" placeholder="请输入" v-model="sendValue"
                @input="sendInputValue" @keyup.enter="inputValueEnter"></textarea>
              <div class="clear iconfont icon-jclear" v-if="sendValue" @click="clearSendValue"></div>
              <!-- 快捷回复 -->

              <transition name="animefive">
                <div class="quick_box" v-if="quickerType">
                  <div class="quick_content">
                    <div class="quick_title">
                      <div class="i iconfont icon-kuaijiehuifu"></div>
                      <div class="t">快捷回复</div>
                    </div>
                    <div class="quick_auto">
                      <template v-for="(item, index) in quickReply" :key="item.qid">
                        <div class="quick_list" @click="setSendValue(item.msg)">
                          <div class="q_list">
                            <div class="i iconfont icon-shandian"></div>
                            <div class="quick_text">{{ item.msg }}</div>
                            <div class="tick iconfont icon-a-svg-equdian_dagou"></div>
                          </div>
                          <!-- <div class="quick_render">
                          <div class="trle"></div>
                          <div class="render_t">
                            <div class="ic iconfont icon-fanyi1"></div>
                            <div class="it">ffdfdggsdsad</div>
                          </div>
                        </div> -->
                        </div>
                      </template>
                    </div>

                  </div>
                  <div class="triangle"></div>
                </div>

              </transition>

            </div>
            <div class="icon iconfont icon-kuaijiehuifu1" @click="setQuicker"></div>
            <div class="icon iconfont icon-fanyi" @click="autoSendType"></div>
            <div class="icon iconfont icon-tupian"></div>
            <div class="icon iconfont icon-fujian"></div>
            <div class="icon iconfont icon-fasong-F"></div>
          </div>
        </div>

        <!-- 语音 -->
        <van-popup v-model:show="showCenter" @closed="onClickOverlay" round
          :style="{ padding: '35px', borderRadius: '30px' }">
          <!-- <div class="loader"></div> -->
          <div class="sound_box">
            <div class="record_box">
              <div class="max_round">
                <div class="center_round"></div>
                <div class="center_round_act" :class="!soundtype ? 'center_round_act_go' : ''"></div>
                <div class="min_round iconfont icon-yuyin" :class="!soundtype ? 'min_round_go' : ''"></div>
              </div>
            </div>
            <div class="work_box">
              <div class="time" v-show="soundTimeEnd">
                <van-count-down ref="recordDown" millisecond :time="soundTime" :auto-start="false" format="mm:ss:SS"
                  @finish="onFinish" />
              </div>
              <div class="time" v-show="!soundTimeEnd">
                录音结束，重置或发送~
              </div>
              <div class="work">
                <template v-if="soundtype">
                  <div class="menu iconfont icon-24gf-recordCircle" @click="recordStart"></div>
                </template>
                <template v-else>
                  <template v-if="soundTimeEnd">
                    <div class="menu iconfont icon-icon_play" @click.stop="recordRecover" v-if="soundvalue"></div>
                    <div class="menu iconfont icon-zanting" @click.stop="recordPause" v-if="!soundvalue"></div>
                  </template>
                  <div class="menu iconfont icon-zhongzhi" @click.stop="recordReset"></div>
                  <div class="menu iconfont icon-mti-yifasong" @click.stop="recordSent"></div>
                </template>
              </div>
            </div>
          </div>
        </van-popup>



      </div>


      <transition name="animefour">
        <div class="chat_profile" v-show="profileUser">
          <div class="put_left iconfont icon-shouqi" @click="openProfile"></div>
          <div class="profile_box">
            <div class="avatar" @click="openDialog">
              <img src="../assets/images/avatar01.jpg" alt="">
              <div class="addtag iconfont icon-tianjiabiaoqian"></div>
            </div>
            <div class="name">Monika</div>
            <div class="tag_box">
              <template v-for="(item, index) in tagData">
                <van-popover v-model:show="item.blister" theme="dark" :actions="tagActions" @open="tagOpenMenu(index)"
                  @select="tagActionsList($event, index)">
                  <template #reference>
                    <div class="tag">
                      <div class="top iconfont icon-star" v-if="item.top"></div><span
                        class="icon iconfont icon-24gl-tag2"></span>{{
                          item.name }}
                    </div>
                  </template>
                </van-popover>
              </template>
            </div>
            <div class="present" ref="presentView">Content of customer introductionContent of customer
              introductionContent of
              customer
              introductionContent of customer introductionintroductionintroduction</div>
          </div>

          <van-dialog v-model:show="tagshow" title="请输入标签名" show-cancel-button confirm-button-color="#746085"
            @confirm="setTagValue">
            <van-field input-align="center" v-model="tagValue" placeholder="请输入" />
          </van-dialog>

          <div class="profile_list">
            <div class="text_box">
              <div class="title">States</div>
              <div class="text">英国</div>
            </div>
            <div class="copy iconfont icon-fuzhi"></div>
          </div>

          <div class="profile_list">
            <div class="text_box">
              <div class="title">Phone call</div>
              <div class="text">0044-7963-123456</div>
            </div>
            <div class="copy iconfont icon-fuzhi"></div>
          </div>

          <div class="profile_list">
            <div class="text_box">
              <div class="title">Email</div>
              <div class="text">fdfdsf@agdfdsfsf.com</div>
            </div>
            <div class="copy iconfont icon-fuzhi"></div>
          </div>

          <div class="profile_title">Historical documents</div>

          <div class="profile_roll">
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type02.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.pdf</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type03.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.rtf</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type04.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.txt</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type05.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.xml</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type01.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.zip</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type02.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.pdf</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type03.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.rtf</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
            <div class="profile_list">
              <div class="img">
                <img src="../assets/images/type04.png" alt="">
              </div>
              <div class="text_box">
                <div class="filename">文件名.txt</div>
                <div class="filesize">10MB</div>
              </div>
              <div class="down iconfont icon-xiazai"></div>
            </div>
          </div>

        </div>
      </transition>


    </div>

  </div>
</template>

<script>
// import Trans from '@/util/translate';  谷歌翻译
import '@/assets/profile.css';
import '@/assets/home.css';
import '@/assets/list.css';
import '@/assets/value.css';
import moment from 'moment';
import axios from 'axios';
import { ref, inject, nextTick, watch, onUnmounted } from 'vue';
import http from '@/util/http';
import Cfg from '@/util/config';
import { showLoadingToast, showConfirmDialog, showImagePreview, showToast, Uploader, closeToast } from 'vant';
import { Howl } from 'howler';
import RecordRTC from 'recordrtc';
import { onBeforeRouteLeave } from 'vue-router';
export default {
  components: {
    [Uploader.name]: Uploader
  },
  // 组件选项
  data() {
    return {
      // 数据对象
      listMode: true,
      tagValue: '',
      tagshow: false,
      quickerType: false,
      soundvalue: false,
      soundtype: true,
      soundTime: 60000,
      soundTimeEnd: true,
      showCenter: false,
      quickShow: true,
      renderAuto: true,
      profileUser: false,
      sendValue: ref(''),
      langshow: false,
      language: '',
      selectHardware: 0,
      selectUser: 0,
      valueList: ref([
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 0,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 1,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 2,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 3,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 4,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 5,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 6,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 7,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 8,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: '',
          type: 1,
          open: false,
          img: '../assets/images/post01.jpg',
          time: '2021-10-31 10:10:10',
          id: 9,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: '',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 9,
          file: '../assets/images/ceshi.rtf',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: '',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 9,
          file: '../assets/images/ceshi.rtf',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: '',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 9,
          file: '',
          phonetic: 'gdfd.mp4',
        },
        {
          name: 'monika',
          msg: '',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 9,
          file: '',
          phonetic: 'gdfd.mp4',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdfgdfgdgdggdgdgdf',
          type: 0,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 10,
          file: '',
          phonetic: '',
        },
        {
          name: 'monika',
          msg: 'gdfgdgdggdgdgdf',
          type: 1,
          open: false,
          img: '',
          time: '2021-10-31 10:10:10',
          id: 11,
          file: '',
          phonetic: '',
        }
      ]),
      itemRefs: ref([]),
      duration: '60',
      direction: {
        type: String,
        default: 'left', // left/right
        validator: val => ['left', 'right'].includes(val)
      },
      isPlaying: false,
      clear: '',

      audioURL: ref(null),
      recorder: null,
      quickReply: ref([]),
      quickReplyValue: ref([]),
      sendTimer: '',
      sendTimerGo: '',
      sendType: false,
      sendSwitch: true,
      tagData: [
        {
          name: '供货量需求大',
          blister: false,
          top: true
        },
        {
          name: 'Kakaotalk',
          blister: false,
          top: false
        },
        {
          name: '服装',
          blister: false,
          top: false
        },
        {
          name: '鞋子',
          blister: false,
          top: false
        },
        {
          name: '性子急',
          blister: false,
          top: false
        },
        {
          name: '利润多',
          blister: false,
          top: false
        },
        {
          name: '规模大',
          blister: false,
          top: false
        },
      ],
      tagActions: [
        { text: '修改' },
        { text: '删除' },
        { text: '置顶' }
      ],
      Socket: '',
      socketTimer: null,
      selectedFiles: ref([])
    };
  },
  mounted() {
    let that = this;
    const appConfig = inject("globalConfig");
    that.language = appConfig.lang
    that.quickReply = appConfig.quicker
    that.quickReplyValue = appConfig.quicker
    // console.log(that.language)
    //console.log(that.quickReply)
    that.scrollToBottom();   //跳转底部
    // that.scrollToIdBottom(7);  //跳转指定id
    
    // that.goWebSocKet()
    // that.getListData()


  },
  watch: {
    sendValue() {
      let that = this;
      if (that.sendSwitch == true) {
        if (that.sendValue.startsWith('/') == false) {
          clearTimeout(this.sendTimer)// 清除之前的定时器
          clearTimeout(this.sendTimerGo)// 清除之前的定时器
          that.sendTimer = setTimeout(() => {// 重新设置定时器
            
            that.sendType = true           
            that.sendTimerGo = setTimeout(() => {// 设置滚动的定时器
              that.scrollToBottom();
            
            
          }, 10);
            
          }, 1000);
          
        }
        
      } else {
        
      }



    }
  },
  created() {


  },
  beforeCreate() {

  },
  beforeUnmount() {
    let that = this;
    clearInterval(that.clear);
    clearInterval(that.socketTimer);

    if (that.Socket) {
      that.Socket.close(); // 关闭WebSocket连接
    }
  },
  methods: {
    getListData() {
      let that = this;
      var datalist = http.post(`users/getmsg.do?userid=234&msgid=456`);
    },
    goWebSocKet() {
      let that = this;
      // 创建WebSocket连接
      const uid = '12345'
      that.Socket = new WebSocket(`ws://localhost:8083/ws/${uid}`); // 确保使用wss（WebSocket Secure）对于生产环境

      const openHandle = () => {
        console.log("ws链接成功啦")
      }
      const closeHandle = () => {
        console.log("ws关闭啦")
        restart()
      }
      const messageHandle = ({ data }) => {
        console.log(data, "ws接受到新信息啦")
      }
      const errorHandle = () => {
        console.log("ws出错啦")
      }


      that.Socket.addEventListener("open", openHandle)
      that.Socket.addEventListener("close", closeHandle)
      that.Socket.addEventListener("message", messageHandle)
      that.Socket.addEventListener("error", errorHandle)


      const restart = () => {  //websocket重连
        console.log("客户端与服务器连接失败,准备开始重连")
        that.socketTimer = setInterval(() => {  //使用定时器重连
          console.log("重连中...")
          that.Socket = new WebSocket(`ws://localhost:8083/ws/${uid}`);
          that.Socket.addEventListener("open", openHandle)
          that.Socket.addEventListener("close", closeHandle)
          that.Socket.addEventListener("message", messageHandle)
          that.Socket.addEventListener("error", errorHandle)
          if (that.Socket.readyState === 0) {
            clearInterval(that.socketTimer)
            that.socketTimer = null;
            //重连成功

          }
        }, 1000)
      }



      // that.Socket.send("消息内容")  //给服务端发送消息




    },
    recordSent() {
      let that = this;
      // 发送录音
      that.recorder.stopRecording(() => {
        const blob = that.recorder.getBlob(); // 获取blob对象，可以用于下载或上传等操作
        that.audioURL = URL.createObjectURL(blob); // 创建一个可下载的URL
        console.log(that.audioURL)
        that.recorder.destroy(); // 销毁Recorder实例，释放资源
        that.recorder = null; // 重置recorder变量，以便可以重新开始录制
        showToast('发送录音成功');
        that.soundtype = true;
        that.soundvalue = false;
        that.showCenter = false;
        that.$refs.recordDown.reset();
      });

    },
    recordStart() {
      let that = this;
      // 开始录音
      this.soundtype = false;
      this.soundvalue = false;
      this.$refs.recordDown.start();

      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          that.recorder = new RecordRTC(stream, {
            type: 'audio',
            mimeType: 'audio/webm' // 或者 'audio/ogg' 根据需要选择格式
          });
          that.recorder.startRecording();
          showToast('开始录音');
        })
        .catch(error => {
          // console.error('无法获取媒体输入流', error);
          showToast('无法获取媒体输入流');
        });



    },
    recordPause() {
      let that = this;
      // 暂停录音
      that.soundvalue = true;
      that.$refs.recordDown.pause();

      if (that.recorder) {
        that.recorder.pauseRecording();
        showToast('停止录音');

      }
    },
    recordRecover() {
      let that = this;
      // 恢复录音
      that.soundvalue = false;
      that.$refs.recordDown.start();

      if (that.recorder) {
        that.recorder.resumeRecording();
        showToast('恢复录音');
      }


    },
    recordReset() {
      let that = this;
      // 重置录音
      that.soundtype = true;
      that.soundvalue = false;
      that.$refs.recordDown.reset();
      that.recorder.destroy(); // 销毁Recorder实例，释放资源
      that.recorder = null; // 重置recorder变量，以便可以重新开始录制
      showToast('重置录音成功');
    },
    onFinish() {
      let that = this;
      if (that.recorder) {
        that.soundTimeEnd = false;
        that.recorder.pauseRecording();
        showToast('录音结束');

      }
    },
    soundRecording() {
      this.showCenter = !this.showCenter
    },
    onClickOverlay() {
      // 点击遮罩层的时候重置
      this.soundtype = true;
      this.soundvalue = false;
      this.$refs.recordDown.reset();
    },
    // renderAutoSwitch() {
    //   let that = this;
    //   let msg = '';
    //   if (that.renderAuto == true) {
    //     msg = '是否关闭翻译'
    //   } else {
    //     msg = '是否打开翻译'
    //   }

    //   showConfirmDialog({
    //     title: '提示',
    //     message: msg,
    //     confirmButtonColor: '#746085'
    //   })
    //     .then(() => {
    //       // on confirm
    //       that.renderAuto = !that.renderAuto;

    //     }).catch(() => {
    //       // on cancel

    //     });

    // },
    goUnreadable() {
      let that = this;

      showConfirmDialog({
        title: '提示',
        message: '是否已读不回？',
        confirmButtonColor: '#7269ef'
      })
        .then(() => {
          // on confirm
          showLoadingToast({
            message: '加载中...',
            duration: 0, // 持续展示 toast
          })
          // var datalist = http.post(`/users/setread.do?userid=${this.selectUser}`);
          closeToast();
          showToast('设置成功');
        }).catch(() => {
          // on cancel
          showToast('点击取消');
        });
    },
    openProfile() {
      let that = this;
      that.profileUser = !that.profileUser;
    },
    setSendValue(msg) {
      let that = this;
      that.quickerType = false;
      that.sendValue = msg;
      that.$refs.footerInput.focus();
    },
    clearSendValue() {
      let that = this;
      that.quickerType = false;
      that.sendType = false;
      that.sendValue = '';
    },
    sendInputValue() {
      let that = this;
      if (that.sendValue.startsWith('/')) {
        that.quickerType = true;
        let qukData = that.quickReplyValue.filter(item => item.qid.includes(that.sendValue));
        if (qukData.length > 0) {
          that.quickReply = qukData;
        } else if (qukData.length == 0) {
          that.quickerType = false;
        }
        //console.log(that.quickReply)
      } else {
        that.quickerType = false;
      }
    },
    inputValueEnter() {
      let that = this;
      that.quickerType = false;
      that.sendType = false;
      that.sendValue = '';
    },
    autoSendType() {
      let that = this;
      let msg = '';
      if (that.sendSwitch == true) {
        msg = '是否关闭翻译'
      } else {
        msg = '是否打开翻译'
      }

      showConfirmDialog({
        title: '提示',
        message: msg,
        confirmButtonColor: '#746085'
      })
        .then(() => {
          // on confirm
          that.sendSwitch = !that.sendSwitch;

        }).catch(() => {
          // on cancel

        });
    },
    setQuicker() {
      let that = this;
      that.quickerType = !that.quickerType;
    },
    togglePlay() {
      let that = this;
      that.isPlaying = true;
      that.clear = setInterval(that.countDown, 1000);
      // 这里可以添加音频播放控制逻辑
    },
    // 倒计时
    countDown() {
      var that = this;
      if (!that.duration) {
        that.isPlaying = false;
        clearInterval(that.clear);
      } else {
        --that.duration;
      }
    },
    playAudio() {
      const sound = new Howl({
        src: ['path/to/your/audio-file.mp3']
      });
      sound.play();
      // sound.pause(); // 暂停音频
      // sound.stop(); // 停止音频播放并重置到开始状态
    },
    langSelct() {
      let that = this;
      that.langshow = !that.langshow;
      this.valueList.forEach(res => {
        res.open = false;
      });
    },
    openList(index) {
      let that = this;
      that.langshow = false;
      that.valueList.forEach(res => {
        res.open = false;
      });
      this.valueList[index].open = true;
    },
    closeDrawers() {
      let that = this;
      that.langshow = false;
      that.valueList.forEach(res => {
        res.open = false;
      });
    },
    setHardware(index) {
      let that = this;
      that.selectHardware = index;
    },
    openUserValue(index) {
      let that = this;
      that.selectUser = index;
    },
    scrollToBottom() {
      let that = this;
      // 设置所有元素的ref，以便之后可以通过itemRefs访问它们
      that.valueList.forEach((item, index) => {
        const element = document.getElementById(item.id); // 或者使用ref获取，例如：element = itemRefs.value[index]
        if (element) {
          that.itemRefs[index] = element; // 将元素存储在ref数组中，以便后续访问和操作

        }
      });
      let num = that.itemRefs.length - 1;

      const goElement = that.itemRefs[num]; // 假设我们要滚动到第二个元素，索引为1（因为索引从0开始）
      if (goElement) {
        goElement.scrollIntoView({ behavior: 'smooth' }); // 或者使用window.scrollTo来控制滚动行为和位置等参数。
        // window.scrollTo({ top: element.offsetTop, behavior: 'smooth' }); // 示例使用window.scrollTo滚动到元素顶部
      }
    },
    scrollToIdBottom(id) {
      let that = this;
      const goElement = document.getElementById(id);
      goElement.scrollIntoView({ behavior: 'smooth' });
    },
    openDialog() {
      let that = this;
      that.tagshow = !that.tagshow
    },
    setTagValue() {
      let that = this;
      console.log(that.tagValue)
    },
    tagActionsList(event, index) {
      console.log(event)
      console.log(index)
    },
    tagOpenMenu(index) {
      let that = this;
      that.tagData.forEach(function (item) {
        item.blister = false
      });
      that.tagData[index].blister = true
    },
    setListMode() {
      let that = this;
      that.listMode = !that.listMode;

    },
    outAbort() {
      let that = this;
      showConfirmDialog({
        title: '提示',
        message: '是否退出登录?',
        confirmButtonColor: '#746085'
      })
        .then(() => {
          // on confirm
          clearInterval(that.socketTimer);

          if (that.Socket) {
            that.Socket.close(); // 关闭WebSocket连接
          }
          this.$router.push({ name: 'about' })

        }).catch(() => {
          // on cancel

        });
    },
    gotopage(url) {
      // let statedata = {
      //   name: this.selectName,
      //   userid: this.selectUser,
      // }
      // this.$router.push({ name: url, state: statedata })
    },
    handleDrop(event) {
      let that = this;
      const files = event.dataTransfer.files;
      if (files.length) {
        Array.from(files).forEach(file => {
          that.selectedFiles.push(file);
          that.handleFile(file); // 处理每个文件，例如预览或上传
        });
      }
    },
    handleFile(file) {
      if (file.type.startsWith('image/')) {
        console.log('图片文件', file);
      } else {
        console.log('非图片文件', file);
        // 处理非图片文件，例如上传到服务器等操作
      }
    }

  },

}
</script>
